﻿<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>Evara - 网上购物商城</title>
<!--    <script src="../../../../console-ban.min.js"></script>-->
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:title" content="">
    <meta property="og:type" content="">
    <meta property="og:url" content="">
    <meta property="og:image" content="">
    <link rel="shortcut icon" type="image/x-icon" href="../../imgs/theme/favicon.svg">
    <link rel="stylesheet" href="../../css/main.css?v=3.4">
</head>
<body>
<header class="header-area header-style-4 header-height-2">
    <div class="header-bottom header-bottom-bg-color sticky-bar">
        <div class="container">
            <div class="header-wrap header-space-between position-relative">
                <div class="logo logo-width-1 d-block d-lg-none">
                    <a href="/url/index"><img src="../../imgs/theme/logo.svg" alt="logo"></a>
                </div>
                <div class="header-nav d-none d-lg-flex">
                    <div class="main-menu main-menu-padding-1 main-menu-lh-2 d-none d-lg-block">
                        <nav>
                            <ul>
                                <li><a class="active" href="/url/promanage">管理员主页 <i class="fi-rs-angle-down"></i></a>
                                    <ul class="sub-menu">
                                        <li><a href="/url/promanage">商品管理</a></li>
                                        <li><a href="/url/usermanage">用户管理</a></li>
                                        <li><a href="/url/ordermanage">订单管理</a></li>
                                        <li><a href="/url/login">退出登录</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<main class="main">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a href="/url/promanage" rel="nofollow">管理员主页</a>
                <span></span> 商品管理
            </div>
        </div>
    </div>
    <section class="mt-50 mb-50">
        <div class="container">
            <form id="info-form">
                <div class="row">
                    <div class="form-group col-md-6">
                        <label>商品id</label>
                        <input required="" class="form-control square" name="proid" readonly placeholder="商品id（自动生成）"
                               type="text" :value="product != null ? product.proid : ''">
                    </div>
                    <div class="form-group col-md-6">
                        <label>商品名称</label>
                        <input required="" class="form-control square" name="name" placeholder="商品名称"
                               type="text" :value="product != null ? product.name : ''">
                    </div>
                    <div class="form-group col-md-6">
                        <label>商品副标题</label>
                        <input required="" class="form-control square" name="subtitle" placeholder="商品副标题"
                               type="text" :value="product != null ? product.subtitle : ''">
                    </div>
                    <div class="form-group col-md-6">
                        <label>产品主图（单张图片）</label>
                        <input type="file" name="imgfile" accept="image/jpeg, image/png, image/jpg">
                        <img v-if="product.mainimage != null" :src="product.mainimage" alt="#" width="80px" height="80px">
                    </div>
                    <div class="form-group col-md-6">
                        <label>商品原价</label>
                        <input required="" class="form-control square" name="price" placeholder="商品原价"
                               type="text" :value="product != null ? product.price : ''">
                    </div>
                    <div class="form-group col-md-6">
                        <label>其他图片（多张图片）</label>
                        <input type="file" name="filelist" accept="image/jpeg, image/png, image/jpg" multiple>
                        <img v-for="item in product.subimagesList" :src="item" width="80px" height="80px" class="mr-5">
                    </div>
                    <div class="form-group col-md-6">
                        <label>优惠价格</label>
                        <input required="" class="form-control square" name="disprice" placeholder="优惠价格"
                               type="text" :value="product != null ? product.disprice : ''">
                    </div>
                    <div class="form-group col-md-6">
                        <label>库存数量</label>
                        <input required="" class="form-control square" name="stock" placeholder="库存数量"
                               type="text" :value="product != null ? product.stock : ''">
                    </div>
                    <div class="form-group col-md-6">
                        <label>商品状态</label>
                        <select class="form-control" name="status" v-model="status">
                            <option value="1">在售</option>
                            <option value="2">下架</option>
                        </select>
                    </div>
                    <div class="form-group col-md-12">
                        <label>长文描述</label>
                        <textarea class="form-control" style="min-height: 125px;"
                                  name="description" cols="30" rows="9" placeholder="长文描述..."
                                  v-text="product != null ? product.description : ''"></textarea>
                    </div>
                    <div class="col-md-12">
                        <button type="button" class="btn btn-fill-out submit"
                                name="submit" value="Submit" v-on:click="saveProduct()">保存
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </section>
</main>
<div id="preloader-active">
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="preloader-inner position-relative">
            <div class="text-center">
                <h5 class="mb-5">Now Loading</h5>
                <div class="loader">
                    <div class="bar bar1"></div>
                    <div class="bar bar2"></div>
                    <div class="bar bar3"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/vendor/modernizr-3.6.0.min.js"></script>
<script src="../../js/vendor/jquery-3.6.0.min.js"></script>
<script src="../../js/vendor/jquery-migrate-3.3.0.min.js"></script>
<script src="../../js/vendor/bootstrap.bundle.min.js"></script>
<script src="../../js/plugins/slick.js"></script>
<script src="../../js/plugins/jquery.syotimer.min.js"></script>
<script src="../../js/plugins/wow.js"></script>
<script src="../../js/plugins/jquery-ui.js"></script>
<script src="../../js/plugins/perfect-scrollbar.js"></script>
<script src="../../js/plugins/magnific-popup.js"></script>
<script src="../../js/plugins/select2.min.js"></script>
<script src="../../js/plugins/waypoints.js"></script>
<script src="../../js/plugins/counterup.js"></script>
<script src="../../js/plugins/jquery.countdown.min.js"></script>
<script src="../../js/plugins/images-loaded.js"></script>
<script src="../../js/plugins/isotope.js"></script>
<script src="../../js/plugins/scrollup.js"></script>
<script src="../../js/plugins/jquery.vticker-min.js"></script>
<script src="../../js/main.js?v=3.4"></script>
<script src="../../js/shop.js?v=3.4"></script>
<script src="../../js/vue.global.js"></script>
<script src="../../js/axios.min.js"></script>
</body>
<script>
    const app = {
        data() {
            return {
                product: {}
            }
        },
        methods: {
            saveProduct: function (id) {
                if (confirm("确认保存该条记录吗？")) {
                    let formData = new FormData($("#info-form")[0]);
                    axios.post('/product/create', formData)
                        .then((response) => {
                            if (response.data.code == 200) {
                                alert('保存成功')
                                setTimeout(location.href = '/url/promanage', 2000);
                            } else {
                                alert('保存失败')
                            }
                        })
                        .catch((error) => {
                            console.error(error);
                            alert('保存失败')
                        })
                }
            },
        },
        created() {
            let searchstr = location.search
            if (searchstr != '') {
                let params = new URLSearchParams(location.search);
                let id = params.get('id')
                let _this = this
                axios.get('/product/'+id)
                    .then((response) => {
                        _this.product = response.data.data
                        _this.status = _this.product.status
                    })
                    .catch((error) => {
                        console.error(error);
                        alert('初期化错误')
                    })
            }
        }
    }
    Vue.createApp(app).mount('body')
</script>
</html>